import React, { useState } from "react";
import logoImage from "../../data/logo.png";
import { UserOutlined, SafetyOutlined } from "@ant-design/icons";
import { Button, Form, Input, Row, Col, Divider, Select } from "antd";
import { useTranslation } from "react-i18next";

import style from "./changepassword.module.scss";

export default function ChangePassword() {
  const { t } = useTranslation();
  const [inputData, setInputData] = useState("1");
  const [buttonData, setButtonData] = useState("1");
  const [buttonFlag, setButtonFlag] = useState(true);
  const [Data, setData] = useState("");

  // 手机号倒计时
  var countdown = 60;
  var value;
  function settime() {
    if (countdown === -1) {
      countdown = 60;
      return;
    } else {
      value = "重新发送(" + countdown + ")";
      countdown--;
      if (countdown > 0) {
        setButtonFlag(false);
      }
      setData(value);
      if (countdown === 0) {
        setButtonFlag(true);
        setButtonData("3");
      }
    }

    setTimeout(function () {
      settime();
    }, 1000);
  }

  const { Option } = Select;

  // 点击验证数据状态更改
  const inputStatus = {
    1: `${t("login.PhoneNumber")}`,
    2: "请输入验证码",
  };
  const buttonStatus = {
    1: `${t("login.GetVerificationCode")}`,
    2: Data,
    3: "重新发送",
  };
  return (
    <div>
      <div className={style.changepasswordBox}>
        <img src={logoImage} />
      </div>
      <div>
        <Form
          name="normal_login"
          className="login-form"
          initialValues={{ remember: true }}
        >
          <Form.Item
            name="gender"
            prefix={<SafetyOutlined className="site-form-item-icon" />}
          >
            <Select
              style={{ textAlign: "left" }}
              defaultValue="phone"
              placeholder={t("login.SelectVerificationMethod")}
              allowClear
            >
              <Option value="phone">{t("login.SMSverification")}</Option>
              <Option value="email">{t("login.Mailboxverification")}</Option>
            </Select>
          </Form.Item>

          <Form.Item style={{ marginBottom: "0px" }}>
            <Row gutter={(10, 10)}>
              <Col span={15}>
                <Form.Item name="captcha">
                  <Input
                    prefix={<SafetyOutlined className="site-form-item-icon" />}
                    placeholder={inputStatus[inputData]}
                  />
                </Form.Item>
              </Col>
              <Col span={9}>
                {buttonFlag ? (
                  <Button
                    onClick={() => {
                      setInputData("2");
                      setButtonData("2");
                      settime();
                    }}
                  >
                    {buttonStatus[buttonData]}
                  </Button>
                ) : (
                  <Button disabled>{buttonStatus[buttonData]}</Button>
                )}
              </Col>
            </Row>
          </Form.Item>

          <Form.Item name="password">
            <Input.Password
              prefix={<UserOutlined className="site-form-item-icon" />}
              placeholder={t("login.password")}
            />
          </Form.Item>

          <Form.Item
            name="confirmpassword"
            dependencies={["password"]}
            hasFeedback
            rules={[
              {
                required: true,
                message: "请确认密码!",
              },
              ({ getFieldValue }) => ({
                validator(_, value) {
                  if (!value || getFieldValue("password") === value) {
                    return Promise.resolve();
                  }
                  return Promise.reject(new Error("两次密码不一致!"));
                },
              }),
            ]}
          >
            <Input.Password
              prefix={<UserOutlined className="site-form-item-icon" />}
              placeholder={t("login.ConfirmPassword")}
            />
          </Form.Item>

          <Button
            style={{ width: "100%" }}
            type="primary"
            onClick={() => {
              setFormNavigation("3");
            }}
          >
            {t("login.confirm")}
          </Button>
        </Form>

        <div className={style.changepasswordformfooter}>
          <a
            href="https://www.allinpayintl.com/ch-zh/us.html"
            style={{ color: "rgb(69 73 79 / 42%)" }}
          >
            {t("login.aboutTonghua")}
          </a>
          <Divider type="vertical" />
          <a
            href="https://www.allinpayintl.com/ch-zh/contact.html"
            style={{ color: "rgb(69 73 79 / 42%)" }}
          >
            {t("login.contactUs")}
          </a>
        </div>
      </div>
    </div>
  );
}
